<template>
    <div class="echartsContainer assetTtrend comBox">
        <div class="titleHeader">
            <div class="title_name">
                <span>资产走势</span>
                <span class="f_right"><em
                        v-if="assetTtrendData && assetTtrendData.deadline">截止时间{{ assetTtrendData.deadline }}</em><i
                        class="iconTip" @click="popTip()"></i></span>
            </div>
        </div>
        <div class="trendChart" v-show="netStatus == 1">
            <div class="activeData" :class="activeBg ? 'activeBg' : ''">
                <div class="fundCon fundConDate" v-if="activeTime">
                    <div class="dateText fundConTop">时间：{{ activeTime }}</div>
                </div>
                <div class="fundCon fundConItems">
                    <div class="fundData">
                        <div>
                            <span class="spot spot1"></span>
                        </div>
                        <div>
                            <div class="name fundConTop">总资产</div>
                            <div :class="activeData && activeData.indexOf('-') != -1 ? 'fontColor2' : 'fontColor1'">
                                <span v-if="activeData > 0">+</span>{{ activeData || activeData == 0 ? activeData : '--'
                              }}<span v-if="activeData"></span>
                            </div>
                        </div>
                    </div>
                    <div class="fundData">
                        <div>
                            <span class="spot spot2"></span>
                        </div>
                        <div>
                            <div class="name fundConTop">资金净流入</div>
                            <div :class="
                                           activeData1 && activeData1.indexOf('-') != -1
                                             ? 'fontColor2'
                                             : activeData1 && activeData1.indexOf('-') == -1
                                             ? 'fontColor1'
                                             : 'gray'
                                         ">
                                <span v-if="activeData1 && activeData1.indexOf('-') == -1">
                                    <span v-if="activeData1 && activeData1.indexOf('-') == -1">+</span>{{ activeData1 }}
                                </span>
                                <span v-else>--</span>
                            </div>
                        </div>
                    </div>
                    <div class="fundData">
                        <div>
                            <span class="spot spot3"></span>
                        </div>
                        <div>
                            <div class="name fundConTop">资金净流出</div>
                            <div :class="
                                             activeData1 && activeData1.indexOf('-') != -1
                                               ? 'fontColor2'
                                               : activeData1 && activeData1.indexOf('-') == -1
                                               ? 'fontColor1'
                                               : 'gray'
                                           ">
                                <span>
                                    {{ activeData1 && activeData1.indexOf('-') != -1 ? activeData1 : '--' }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="trendCharts" ref="trendCharts" style="width: 83vw" :id="id"></div>
            <div v-if="dataChanged" class="echartsLoading">正在计算中，请稍等片刻</div>
        </div>
        <!--  网不好 -->
        <div v-show="netStatus == 2">
            <div class="noDataImg">
                <img src="../assets/imgs/nowang.png" alt="" />
                <p class="tipTxt">数据加载失败</p>
            </div>
        </div>
        <!-- 没数据 -->
        <div v-show="netStatus == 3">
            <div class="noDataImg">
                 <img src="../assets/imgs/noData.png" alt="" />
                <p class="tipTxt">暂无数据哦</p>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        props: {
            assetTtrendData: {
                type: Object,
            },
            id: {
                type: String,
            },
            netStatus: {
                //1成功，2网不好，3没数据
                type: Number,
                default: 1,
            },
        },
        data() {
            return {
                dataRefresh: false, //网络中断接口异常，数据异常，需要点击刷新
                dataChanged: false, //数据加载中
                activeBg: false,
                symboltype: 'none',
                charts: null,
                //折线图选中当前位置信息
                activeTime: null,
                activeData: null,
                activeData1: null,
                activeData2: null,
                normalDialog: {
                    showMask: false,
                    title: '',
                    content: '',
                    yesBtn: '',
                    cancelBtn: '',
                    hideCelButton: '', //为true时隐藏cel按钮，仅使用yes按钮的所有属性
                },
            };
        },
        computed: {},
        created() {},
        mounted() {
            if (this.assetConfigData) {
                this.showChart();
            }
        },
        watch: {
            assetTtrendData: {
                handler(newVal) {
                    if (!(JSON.stringify(this.assetTtrendData) === '{}')) {
                        this.showChart();
                    }
                },
                deep: true,
            },
        },
        components: {},
        methods: {
            getOption() {
                let _this = this;
                if (_this.assetTtrendData) {
                    let data = _this.assetTtrendData;
                    let xAxisData = data.date;
                    let seriesData1 = data.fund1Data;
                    let data1 = data.fund2Data;
                    var emphasisStyle = {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowColor: 'rgba(0,0,0,0.3)',
                        },
                    };
                    let option = {

                        tooltip: {
                            trigger: 'axis',
                            formatter: function(params) {
                                _this.activeBg = true;
                                let value1 = params.filter(item => {
                                    return item.seriesName == 'line1';
                                });
                                let value2 = params.filter((item, index) => {
                                    return item.seriesName == 'bar2';
                                });
                                _this.activeTime =
                                    value1[0] &&

                                    (_this.$utils.getVarType.isArray(value1[0].data) == 'array' ? value1[0]
                                        .data[0] : value1[0].data);

                                _this.activeData =
                                    value1[0] &&
                                    (_this.$utils.getVarType.isArray(value1[0].data) == 'array' ? value1[0]
                                        .data[2] : value1[0].data);
                                _this.activeData1 =
                                    value2[0] &&
                                    (_this.$utils.getVarType.isArray(value2[0].data) == 'array' ? value2[0]
                                        .data[2] : value2[0].data);
                                return '';
                            },
                            backgroundColor: 'rgba(218,181,124, 0.1)',
                            extraCssText: [7, 15, 15, 15],
                            textStyle: {
                                color: '#5B83FF',
                            },
                            confine: true,
                            axisPointer: {
                                label: {
                                    show: true,
                                    color: '#fff',
                                    fontFamily: 'PingFangSC-Medium',
                                    fontSize: 14,
                                    borderRadius: 4,
                                    margin: 5,
                                    padding: [2, 4],
                                    backgroundColor: '#027ADF',
                                },
                                show: true,
                                snap: true,
                                type: 'cross',
                                trigger: 'item',
                                crossStyle: {
                                    type: 'dashed',
                                    color: '#027ADF',
                                },
                                lineStyle: {
                                    type: 'dashed',
                                    color: '#027ADF',
                                },
                            },
                        },
                        grid: {
                            top: '10%',
                            left: '0',
                            right: '0',
                            bottom: '5%',
                            containLabel: true,
                            width: 'auto', //图例宽度
                        },
                        xAxis: {
                            type: 'category',
                            data: xAxisData,
                            axisLine: {
                                lineStyle: {
                                    color: '#D2D2D2',
                                },
                            },
                            axisPointer: {
                                show: true,
                            },
                            axisLabel: {
                                show: true,
                                color: '#999999',
                                margin: 10,
                                interval: (index, value) => {
                                    if ([0, xAxisData.length - 1, parseInt(xAxisData.length / 2)].includes(
                                            index)) {
                                        return true;
                                    } else {
                                        return false;
                                    }
                                },
                                formatter: function(value, index) {
                                    if (index == 0) {
                                        return '                    ' + value;
                                    } else if (index == xAxisData.length - 1) {
                                        return value + '                    ';
                                    } else {
                                        return value;
                                    }
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                        },
                        yAxis: [{
                                type: 'value',
                                axisTick: {
                                    show: false,
                                },
                                min: 'dataMin',//这里以数据返回最小值显示，可能出现与Y轴平不显示问题，直接把这去掉，或加入自己开发的向下取整以1开头
                                // min:function(value){
                                //     let numInts = Math.floor(value,min)
                                //     let numLen = numInts.toString().length;
                                //     let returnNum ='1'+Array(numLen).join('0')
                                //     return returnNum
                                // },
                                axisLine: {
                                    show: false,
                                },
                                splitLine: {
                                    lineStyle: {
                                        type: 'dashed',
                                        color: '#D2D2D2',
                                    },
                                },
                                axisPointer: {
                                    show: false,
                                },
                                axisLabel: {
                                    show: true,
                                    color: ' #999999',
                                    // formatter: function(value, index) {
                                    //     let val = _this.assetTtrendData.needPercent ?
                                    //         `${value}.toFixed(2)` :
                                    //         value == 0 ?
                                    //         '0.00' :
                                    //         `${value}万`;
                                    //     return val;
                                    // },
                                    // 滑动时接一个间隔显示
                                    formatter:function(value,index){
                                        return value
                                    }
                                },
                            },
                            {
                                type: 'value',
                                position: 'left',
                                alignTicks: true,
                                axisLine: {
                                    show: false,
                                },
                            },
                        ],
                        series: [{
                                type: 'line',
                                name: 'line1',
                                areaStyle: {
                                    normal: {
                                        color: new this.$echarts4.graphic.LinearGradient(0, 1, 0, 0, [{
                                                offset: 0,
                                                color: 'rgba(7,104,248,0)',
                                            },
                                            {
                                                offset: 1,
                                                color: 'rgba(7,104,248,.1)',
                                            },
                                        ]),
                                    },
                                },
                                // 点颜色
                                itemStyle: {
                                    normal: {
                                        color: '#027ADF',
                                    },
                                },
                                lineStyle: {
                                    color: '#0768F8',
                                    width: 1.2,
                                },
                                symbol: 'circle',
                                symbolSize: 2,
                                showSymbol: false,
                                showAllSymbol: false,
                                hoverAnimation: true,
                                data: seriesData1,
                            },

                            {
                                name: 'bar2',
                                type: 'bar',
                                stack: 'one',
                                emphasis: emphasisStyle,
                                data: data1,
                                itemStyle: {
                                    normal: {
                                        color: function(params) {
                                            // 根据正负显示不同颜色
                                            if (params.value[1] > 0) {
                                                //根据真实数值正负显示不同柱形颜色
                                                return '#FB5F40';
                                            } else {
                                                return '#08C274';
                                            }
                                        },
                                    },
                                },
                            },
                        ],
                    };
                    return option;
                }
            },
            showChart(status) {
                let _this = this;
                let myChart = this.$echarts4.init(document.getElementById(_this.id));
                _this.charts = myChart;

                function todo(type) {
                    let dateLength = _this.assetTtrendData.date && _this.assetTtrendData.date.length - 1;
                    _this.activeTime = _this.assetTtrendData.date[dateLength];
                    _this.activeData =
                        _this.assetTtrendData.fund1Data &&
                        _this.assetTtrendData.fund1Data[
                            _this.assetTtrendData.fund1Data && _this.assetTtrendData.fund1Data.length - 1
                        ] &&
                        _this.assetTtrendData.fund1Data[
                            _this.assetTtrendData.fund1Data && _this.assetTtrendData.fund1Data.length - 1
                        ][2];
                    _this.activeData1 =
                        _this.assetTtrendData.fund2Data &&
                        _this.assetTtrendData.fund2Data[
                            _this.assetTtrendData.fund2Data && _this.assetTtrendData.fund2Data.length - 1
                        ] &&
                        _this.assetTtrendData.fund2Data[
                            _this.assetTtrendData.fund2Data && _this.assetTtrendData.fund2Data.length - 1
                        ][2];
                    _this.activeBg = false;
                    type == 1 && myChart.setOption(_this.getOption(), status);
                }
                todo(1);
                window.addEventListener('resize', () => {
                    myChart.resize();

                    _this.charts.resize();
                });
                myChart.getZr().on('click', params => {
                    todo(2);

                    myChart.dispatchAction({
                        type: 'hideTip', //隐藏tooltip
                    });
                    myChart.dispatchAction({
                        type: 'updateAxisPointer',
                        currTrigger: 'leave', //隐藏竖线指示器
                    });
                });
                myChart.getZr().on('mouseup', params => {
                    todo(2);

                    myChart.dispatchAction({
                        type: 'hideTip', //隐藏tooltip
                    });

                    myChart.dispatchAction({
                        type: 'updateAxisPointer',
                        currTrigger: 'leave', //隐藏竖线指示器
                    });
                });
            },
            filterEllise(name) {
                if (name) {
                    if (name.length > 5) {
                        return name.substring(0, 5) + '...';
                    } else {
                        return name;
                    }
                } else {
                    return '--';
                }
            },
            popTip(name, numVal) {
                this.normalDialog = {
                    title: '资产走势',
                    content: `<div class="lineH grayColor" style="color: #666;font-size:12px;padding-bottom: 10px;font-family: PingFangSC-Regular, PingFang SC;">数据起始时间为您持仓以来，若您投资早于2020年7月1日则从2020年7月1日开始计算。</div><div class="lineH" style="font-size: 14px;color: #333;font-family: PingFangSC-Regular, PingFang SC;">展示您当前持仓产品的市值变动及您的资金。</div>`,
                    yesBtn: '我知道了',
                    cancelBtn: '',
                    hideCelButton: true,
                    showMask: true,
                };
            },
            //弹框取消按钮
            confirmBtn() {
                this.normalDialog.showMask = false;
            },
            //弹框取消按钮
            closeBtn() {
                this.normalDialog.showMask = false;
            },
        },
        activated() {
            if (this.charts) {
                this.charts.resize();
            }
        },
    };
</script>

<style scoped lang="less">
    // @import '../../assets/style/assetViewReport/report.less';
    .trendCharts {
        width: 100%;
        height: 5.2rem;
        margin-left: 20px;
        margin-top: -5px;
    }

    .trendChart {
        .activeBg {
            background: rgba(2, 122, 223, 0.06);
            padding: 8px;
        }

        .activeData {
            border-radius: 8px;
            margin: 10px;
            margin-bottom: 0;
            padding: 8px;
            padding-bottom: 0;

            .fundCon {
                display: flex;
                justify-content: flex-end;
            }

            .fundConDate {
                display: flex;
                flex-direction: column;
                font-size: 12px;
                font-family: PingFangSC, PingFangSC-Regular;
                color: #999999;
            }

            .fundConTop {
                margin-bottom: 5px;
            }

            .fundConItems {
                flex: 1;
                margin-left: 4px;

                :first-child {
                    margin-left: 0 !important;
                }

                .fundData {
                    flex: 1;
                    display: flex;
                    font-size: 12px;
                    font-family: PingFangSC, PingFangSC-Regular;
                    margin-right: 30px;

                    &:last-child {
                        margin-right: 0;
                    }

                    .spot {
                        display: inline-block;
                        width: 3px;
                        height: 8px;
                        margin-right: 4px;
                        margin-top: 4px;
                    }

                    .spot0 {
                        background: transparent;
                    }

                    .spot1 {
                        //   background: linear-gradient(180deg, #ffe458, #ff3471);
                        background: #0768f8;
                    }

                    .spot2 {
                        //   background: linear-gradient(180deg, #c42cff, #0768f8);
                        background: #f06048;
                    }

                    .spot3 {
                        background: #08c274;
                    }

                    .name {
                        color: #60697e;
                        font-size: 12px;
                        font-family: PingFangSC, PingFangSC-Regular;
                        color: #333333;
                        // width: 1.44rem;
                        overflow: hidden;
                        /*超出部分隐藏*/
                        white-space: nowrap;
                        /*不换行*/
                        text-overflow: ellipsis;
                        /*超出部分文字以...显示*/
                    }

                    .fontColor2 {
                        color: #57b231;
                    }

                    .fontColor1 {
                        color: #ec0000;
                    }

                    .gray {
                        color: #666;
                        // color: #00f;
                    }
                }
            }
        }
    }

    .echartsContainer {
        position: relative;
        margin-top: 15px;
    }

    .echartsLoading {
        position: absolute;
        top: 0;
        left: -0.32rem;
        right: 0;
        bottom: 0;
        height: 100%;
        background: rgba(255, 255, 255, 1);
        width: calc(100% + 0.64rem);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #868e9f;
        font-size: 0.22rem;
    }

    .titleHeader {
        font-size: 15px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #000000;
        margin: 0 15px;

        .title_name {
            padding: 15px 0;
            border-bottom: 1px solid #e6e6e6;
            display: flex;
            justify-content: space-between;

            em {
                font-style: normal;
                font-size: 11px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #999999;
            }

            .iconTip {
                // background: url('@/assets/img/assetViewReport/wenhao.png') no-repeat center;
                background-size: cover;
                display: flex;
                width: 13px;
                height: 13px;
                display: inline-block;
                vertical-align: middle;
                margin-left: 6px;
            }
        }
    }
</style>
